<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.bg{
				background-color: #eee;
				width: 350px;
				height: 270px;
				margin: 0 auto;
				overflow: auto;
			}
			
			form{
				padding-left: 100px;
				padding-top: 40px;
			}
			
			p{
				margin-bottom: 27px;
				height: 25px;
			}
			
			#txt{
				border: none;
				outline: none;
				height: 25px;;
				border-radius: 25px;
				text-indent: 10px;
				font-family: "幼圆";
			}
			
			.box{
				margin: 30px;
				position: relative;
			}
			
			.pic{
				display: inline-block;
				width: 70px;
				height: 70px;
				border-radius: 35px;
				background-color: royalblue;
				position: absolute;
				top:30px;
				line-height: 70px;
				text-align: center;
				font-family: "幼圆";
				font-size: 45px;
				color: #fff;
				opacity: 0;
				transition: .5s;
			}
			
			#btn{
				border: none;
				outline: none;
				width: 80px;
				height: 25px;
				border-radius: 14px;
				background-color: darkseagreen;
				color: #fff;
				margin-top: 20px;
			}

		</style>
	</head>
	<body>
		<div class="bg">
			<div class="box">
				<div class="pic" id="pic"></div>
				<form action="">
					<p>UserName:<br></user:br><input type="text" name="" id="txt" value="" /></p>
					<input type="button" id="btn" value="登录" />
				</form>
			</div>
		</div>
		
		<script type="text/javascript">
			var oPic = document.getElementById('pic');
			var oTxt = document.getElementById('txt');
			var oBtn = document.getElementById('btn');
			
			oBtn.onclick = function (ev){
				var oEvent = ev || window.event;
				var oTarget = oEvent.target || oEvent.srcElement;
				
				var strUser = oTxt.value;
				var colorNumber1 = Math.floor(Math.random()*10);
				var colorNumber2 = Math.floor(Math.random()*10);
				var colorNumber3 = Math.floor(Math.random()*10);
				var colorStr = '#'+ colorNumber1 + colorNumber2 + colorNumber3;
				console.log(colorStr);
				
				oPic.style.opacity = 0;
				if(strUser[0]==null){
					alert('Please Input Username')
				}else{
					oPic.style.opacity = 1;
					oPic.style.backgroundColor = colorStr;
					oPic.innerHTML = strUser[0];
				}
				
			}
		</script>
	</body>
</html>
